<template>
  <Layout>
    <Header style="padding: 0">
      <Menu mode="horizontal" :theme="theme1" active-name="1">
        <MenuItem name="1">
          <div @click="signIn">
            <Icon type="ios-paper" />
            登录
          </div>
        </MenuItem>
        <MenuItem name="2">
          <div @click="userInfo">
            <Icon type="ios-paper" />
            个人信息
          </div>
        </MenuItem>
        <Submenu name="3">
          <template slot="title">
            <Icon type="ios-stats" />
            统计分析
          </template>
          <MenuGroup title="使用">
            <MenuItem name="3-1">新增和启动</MenuItem>
            <MenuItem name="3-2">活跃分析</MenuItem>
            <MenuItem name="3-3">时段分析</MenuItem>
          </MenuGroup>
          <MenuGroup title="留存">
            <MenuItem name="3-4">用户留存</MenuItem>
            <MenuItem name="3-5">流失用户</MenuItem>
          </MenuGroup>
        </Submenu>
        <MenuItem name="4">
          <Icon type="ios-construct" />
          综合设置
        </MenuItem>
        <MenuItem style="float: right" name="5">
          <Input style="width: 300px"></Input>
          <Button>搜索</Button>
        </MenuItem>
      </Menu>
    </Header>
<!--   中间部分路由-->
    <router-view></router-view>
    <Footer style="border: 1px silver solid">
      <!--  底部-->
      <Row>
        <Col id="fonter" span="24">
          <span>版权所有-违者必究</span>
        </Col>
      </Row>
    </Footer>
  </Layout>
</template>

<script>
export default {
  data(){
    return {
      theme1:'light',
    }
  },
  methods:{
    signIn(){
      this.$router.push('/signin')
    },
    userInfo(){
      this.$router.push('/userinfo')
    }
  }
}
</script>

<style lang="scss">
  .demo-carousel>img {
    width: 100%;
  }
  #fonter {
    display: flex;
    justify-content: center;
  }
  .ivu-layout-sider-children {
    background-color: #fff;
  }
</style>
